<!-- 代码功能概述
界面布局：使用Flexbox布局创建一个顶部导航条，左侧显示系统标志和名称，右侧是用户相关的操作，如退出系统。
数据处理：组件通过props接收用户信息，同时可以从sessionStorage中获取用户信息以维护登录状态。
交互功能：提供一个下拉菜单供用户进行额外操作（如退出系统），并通过路由导向和消息反馈增强用户体验。
样式控制：局部样式限制于组件范围，使用scoped属性确保样式不会影响到其他组件。 -->
<template>
 <div style="height: 50px; line-height:50px; border-bottom: 1px solid #ccc; display: flex">
   <!-- 左侧的标志和系统名称 -->
   <div style="width: 200px; padding-left:30px; font-weight: bold; color:dodgerblue">
     <img :src="imgUrl" class="icon">
     图书馆管理系统
   </div>
   <!-- 中间空白填充区域 -->
   <div style="flex: 1"></div>
   <!-- 右侧的用户下拉菜单 -->
   <div style="width: 100px">
     <el-dropdown>
       <!-- 下拉触发元素 -->
       <span class="el-dropdown-link">
         {{ user.nickName }} <el-icon class="el-icon--right">
           <arrow-down />
         </el-icon>
       </span>
       <!-- 下拉菜单内容 -->
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item @click="exit">退出系统</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
   </div>
 </div>
</template>

<script>
import { ElMessage } from "element-plus"; // 引入Element Plus的消息组件

export default {
  name: "Header",
  props: ['user'],
  data() {
    return {
      user: [],
      imgUrl: require("../assets/icon/login.png") // 图标路径
    }
  },
  created() {
    // 从sessionStorage获取用户信息并解析
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
  },
  methods: {
    exit() {
      sessionStorage.removeItem("user") // 清除用户session信息
      this.$router.push("/login") // 路由跳转到登录页面
      ElMessage.success("退出系统成功") // 显示成功消息
    }
  }
}
</script>

<style scoped>
.icon {
  width: 40px; /* // 图标宽度 */
  height: 40px; /* // 图标高度 */
  padding-top: 5px; /* // 图标顶部内边距 */
  padding-right: 10px; /* // 图标右侧内边距 */
}
</style>
